<template>
  <el-dialog width="60%" :title="title" :close-on-click-modal="false" :visible.sync="visible">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()"
      label-width="120px">
      <h3>基本信息</h3>
      <el-row>
        <el-col :span="8">
          <el-form-item label="仓库" prop="name">
            <el-select v-model="dataForm.stockHouseId" placeholder="请选择仓库" clearable style="width: 100%" disabled>
              <el-option v-for="(item,index) in stockHouse" :key="index"
                :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="出库时期" prop="outboundDate">
            <el-date-picker v-model="dataForm.outboundDate" style="width: 100%" value-format="yyyy-MM-dd"
              type="date"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="生成方式" prop="createType">
            <el-select v-model="dataForm.createType" placeholder="请选择生成方式" clearable style="width: 100%">
              <el-option v-for="(item,index) in createTypes" :key="index" :disabled="item.disabled"
                :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="状态" prop="status">
            <el-select v-model="dataForm.status" placeholder="请选择状态" clearable style="width: 100%">
              <el-option v-for="(item,index) in ['待出库','已出库','已作废']" :key="index" :label="item" :value="index" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="支付状态" prop="payStatus">
            <el-select v-model="dataForm.payStatus" placeholder="请选择支付状态" clearable style="width: 100%">
              <el-option v-for="(item,index) in ['未支付','已支付']" :key="index" :label="item" :value="index" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="支付方式" prop="payType">
            <el-select v-model="dataForm.payType" placeholder="请选择支付方式" clearable style="width: 100%">
              <el-option v-for="(item,index) in ['微信','支付宝','现金','挂账']" :key="index" :label="item" :value="index" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="出库人" prop="outboundUserId">
            <el-input v-model="dataForm.outboundUserId" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="支付金额" prop="payAmount">
            <el-input v-model="dataForm.payAmount" disabled placeholder="系统自动生成"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="出库单号" prop="no">
            <el-input v-model="dataForm.no" disabled placeholder="系统自动生成"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <h3>货品清单</h3>
      <el-row>
        <el-col :span="12">
          <el-select v-model="goods" placeholder="选择商品" style="width: 100%" @change="selectGoods">
            <el-option v-for="(item,index) in stockList" :key="index" :disabled="item.disabled"
              :label="item.goodsName" :value="item.id" />
          </el-select>
        </el-col>
      </el-row>
      <el-table :data="dataForm.outboundListDetailList" style="margin-top:20px">
        <el-table-column prop="goodsName" label="商品名称" width="500" align="center"/>
        <el-table-column prop="unit" label="单位" align="center"/>
        <el-table-column label="出库数量" prop="quantity" align="center">
          <template slot-scope="scope">
            <el-input type="number" v-model="scope.row.quantity" min="0" :max="scope.row.lastNum"/>
          </template>
        </el-table-column>
        <el-table-column prop="lastNum" label="库存数量" align="center"/>
        <el-table-column prop="warehousingPrice" label="单价" align="center"/>
        <el-table-column prop="sellingPrice" label="售价" align="center"/>
        <el-table-column label="操作"  align="center">
          <template slot-scope="scope">
            <el-link size="mini" type="danger" @click="deleteItem(scope.$index)">删除</el-link>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>

  import {
    addOrUpdate
  } from "@/api/business/franchiseeinfo";
  import {formatDate} from "@/utils/index"
  import {
    page as getStock,
  } from "@/api/business/stock/stock";

  import {
    add
  } from "@/api/business/stock/outbound";
  
  import { mapState } from 'vuex';
  export default {
    computed:{
      ...mapState({
          sysUser: state => state.user.sysUser,
        })
    },
    data() {
      return {
        title: '新增出库单',
        visible: false,
        dataForm: {
          stockHouseId:'d9c7f6765c924dffbd4771b7c2e31785',
          createType:1,
          status:1,
          payStatus:1,
          payType:0,
          outboundUserId:'fea58995c4cd4aea85b20046b82da442',
          outboundListDetailList:[]
        },
        goods:'',
        stockList:[],
        stockHouse:[{
          value:'d9c7f6765c924dffbd4771b7c2e31785',
          label:'1仓库'
        }],
        outboundUser:'管理员',
        createTypes: [
          {
            value: 1,
            label: '批发出库',
            disabled:false,
          },
          {
            value: 2,
            label: '损耗出库',
            disabled:false,
          },{
            value: 3,
            label: '零售出库',
            disabled:true,
          },{
            value: 4,
            label: '盘点出库',
            disabled:true,
          },
        ],
        dataRule: {
          stockHouseId: [{
            required: true,
            message: '仓库不能为空',
            trigger: 'blur'
          }],
        }
      }
    },
    methods: {
      deleteItem(e){
        this.dataForm.outboundListDetailList.splice(e,1);
      },
      init() {
        this.visible = true
        this.dataForm = {
          stockHouseId:'d9c7f6765c924dffbd4771b7c2e31785',
          createType:1,
          status:1,
          payStatus:1,
          payType:0,
          outboundUserId:'管理员',
          outboundListDetailList:[],
          outboundDate:formatDate(),
        },
        getStock({
          pageNum:1,
          pageSize:1000,
          search:{
            stockHouseId:this.sysUser.agentId
          }
        }).then(res=>{
          this.stockList = res.data.list;
          console.log(res,this.stockList)
        })
      },
      selectGoods(e){
        var index;
        for(var i = 0;i<this.stockList.length;i++){
          if(this.stockList[i].id == e){
            index = i;
            break;
          }
        }
        const goods = this.stockList[index]; 
        goods.lastNum = goods.quantity;
        goods.quantity = 1
        this.dataForm.outboundListDetailList.push(goods)
        this.stockList[index].disabled = true;
      },
      // 表单提交
      dataFormSubmit() {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            add(this.dataForm).then(res => {
              this.visible = false
              this.$modal.msgSuccess(this.title + "成功");
              this.$emit('refreshDataList')
            })
          }
        })
      }
    }
  }
</script>
